<template>
    <div class="content">
        <h1 style="text-align: center;">登录</h1>
     <el-form
    ref="formRef"
    style="max-width: 350px"
    :model="fromdata"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="用户名：" prop="username">
      <el-input v-model="fromdata.username" />
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input v-model="fromdata.password" />
    </el-form-item>
    
    <el-form-item style="margin-left: 100px;">
      <el-button type="primary" @click="submitForm()">
        登录
      </el-button>
      <el-button @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>

</div>


    <!-- <el-button type="primary" @click='loginbtn'>模拟登录</el-button>
    <el-button type="success" @click="userList">获取用户信息</el-button> -->
</template>

<script setup>
import { ref,reactive } from 'vue';
import request from '../utils/request';
import qs from 'qs'
import { ElMessage } from 'element-plus'
const formRef =ref()
const fromdata = ref(
    {
        username:'',
        password:''
    }
)

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名中文或者邮箱', trigger: 'blur' }
  ],
  password:[
    { required: true, message: '请输入用户密码数字类型', trigger: 'blur' }
  ],
  })

import { useRouter } from 'vue-router';
const router = useRouter()

const submitForm=()=>{
    formRef.value.validate(async (valid)=>{
        if(valid){
            let res= await request.post('user/login?'+ qs.stringify(fromdata.value))
            console.log(res.data);
            if(res.data.code === 200){
                ElMessage.success(res.data.info)
                window.sessionStorage.setItem('token', res.data.token);
                router.push({name:'home'})
            }else{
                ElMessage.error(res.info)
            }

        }else{
            console.log("登录失败");
            
        }
    })
}





/*

const loginbtn= async ()=>{
    let res=await request.get('user/jwttest')
    console.log(res.data);
    if(res.data.code == 200){
        const token = res.data.token
        window.sessionStorage.setItem("token",token)
    }else{
        console.log("登录失败");
        
    }
    
}

const userList= async ()=>{
    let res= await request.get('user/testUser')
    console.log(res);
    let data = res.data
        if(data.code=200){
            console.log("获取用户信息成功");
            const userList = data.data
            console.log("用户信息列表数据：",userList);
            
        }else{
              console.log("获取失败");
        }
 
}

*/
// import axios from 'axios'


// const calluser = async()=>{
//    let res=await axios.get("http://localhost:8000/user/testUser")
//    console.log(res);
   
// }
// calluser()

</script>

<style  scoped>
.content{
    width: 100%;
    height: 100vh;
    
    background-color: antiquewhite;
    background-image: url('../assets/bj.jpg');
     background-repeat: no-repeat;
     background-size: 100% 100%;
    h1{
        padding-top: 290px;
        padding-left: 120px;
        margin-bottom: 10px;
        color: #ffffff;
        font-weight: 800;
    }
    .el-form{
       padding-left: 600px;
       color: #ffffff;
    }
}
</style>